import React, { Component } from 'react';
import "./mytime.css"

interface Props {

}
interface State {
    h: number,
    m: number,
    s: number,
}
class Mytime extends Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = {
            h: 2,
            m: 0,
            s: 0
        }
    }
    componentDidMount() {

        var time = setInterval(() => {
            this.setState({ s: this.state.s - 1 }, () => {
                if (this.state.s < 0) {
                    this.setState({ s: 59 }, () => {
                        this.setState({ m: this.state.m - 1 }, () => {
                            if (this.state.m < 0) {
                                this.setState({ m: 59 }, () => {
                                    this.setState({ h: this.state.h - 1 }, () => {
                                        if (this.state.h === -1) {
                                            this.setState({ s: 0,m:0,h:0 })
                                            clearInterval(time);
                                        }
                                    })

                                })

                            }
                        })

                    })

                }
            })

        }, 1000)
    }
    render() {
        return (
            <div className='mytime'>
                <span>嗨购秒杀</span>
                <span>18点场</span>
                {/* 时 */}
                <div className='time'>{this.state.h<10?"0"+this.state.h:this.state.h}</div>
                {/* 分 */}
                <div className='time'>{this.state.m<10?"0"+this.state.m:this.state.m}</div>

                {/* 秒 */}
                <div className='time'>{this.state.s<10?"0"+this.state.s:this.state.s}</div>
                <span> 爆款轮番秒</span>
            </div>
        );
    }
}

export default Mytime;